<template>
  <div :class="switchValue == '' ? 'home_dark' : 'home_' + switchValue ">
    <div class="second-page optionsdd">
      <div class="wrap">
      <headerCom2 active="options"></headerCom2>
      </div>
      <div class="banner">
        <div class="wrap">
          <div class="banner-left-title">
            <p>意见建议</p>
          </div>
          <div class="banner-right-crumbs">
            <p>您的位置：首页 > 意见建议</p>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="wrap">
          <div class="left-module-box" >
            <div class="user-msg-box" style="width:10rem">
              <div class="user-msg-toux">
                <el-image :src="headPic"></el-image>
              </div>
              <div class="user-msg-val">
                <p class="p1">{{ userInfo.userName }}</p>
                <p class="p2">{{ userInfo.orgName }}</p>
                <p class="p3">{{ userInfo.positionName }}</p>
              </div>
            </div>
          </div>

          <div class="right-module-box">
            <div class="rightmsg-title-box">
              <p>意见建议</p>
            </div>
            <el-form
              ref="opinionsForm"
              :model="opinionsForm"
              class="info-form"
              label-width="75px"
            >
              <el-form-item label="标题">
                <el-input placeholder="请输入标题" v-model="opinionsForm.title" style="width:40vw"></el-input>
              </el-form-item>
              <el-form-item label="系统名称">
                <el-select
                style="width:40vw"
                  v-model="opinionsForm.systemId"
                  clearable
                  filterable
                  placeholder="请选择系统名称"
                >
                  <el-option
                    v-for="item in systemItems"
                    :key="item.ID"
                    :label="item.SYSNAME"
                    :value="item.ID"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item  label="意见建议" style="margin-bottom:0">
                <!-- <editor
                  :value="opinionsForm.opinions"
                  @contentData="contentChange($event)"
                ></editor> -->
                <el-input
                type="textarea"
                cols="100" 
                rows="30"
                style="width:40vw"
                placeholder="请输入意见建议"
                v-model="opinionsForm.opinions">
              </el-input>
              </el-form-item>
            </el-form>
              <div class="buttons" style="text-align: right;margin-right:0.15rem;padding-bottom:5vh">
                <el-button type="primary" @click="save">保存</el-button>
                <el-button @click="cancel">取消</el-button>
              </div>
          </div>
        </div>
      </div>
     <footerCom></footerCom>
    </div>
  </div>
</template>

<script scoped>
import editor from "./common/editor";
import footerCom from "./footerCom.vue"
import '@/utils/rem.js'
import HeaderCom2 from './headerCom2.vue';
export default {
  name: "Opinions",
  props: {},
  components: { editor,footerCom, HeaderCom2 },
  computed: {},
  data() {
    return {
      switchValue: 'dark',
      index:false,
      interfaceName: "antu.newportal-zjx.provider.portal.PortalProvider",
      opinionsForm: {
        title: "",
        systemName: "",
        systemId: "",
        opinions: "",
        userName: "",
        userId: "",
      },
      systemItems: [],
      headPic:
        "http://172.18.3.11/mhoffice/MH/Theme/Images/mhsystem/%E5%A4%B4%E5%83%8F.png",
      userInfo: {},
    };
  },
  methods: {
    // 获取用户主题
    getUserStyle() {
      let that = this
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
          methodName: "getUserStyle",
          args: [localStorage.getItem("USER_ID")],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            if (response.result == "1") {
              this.switchValue = "light";
            } else {
              this.switchValue = "dark";
            }
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    getSystem() {
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: this.interfaceName,
          methodName: "getSystem",
          args: [localStorage.getItem("USER_ID")],
        },
        dataType: "json",
        success: (response) => {
          console.log(response);
          if (response.status === "0") {
            response.result = JSON.parse(response.result);
            this.systemItems = response.result;
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    contentChange(event) {
      this.opinionsForm.opinions = event;
    },
    getUserInfo() {
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
          methodName: "getUserInfo",
          args: [localStorage.getItem("USER_ID")],
        },
        dataType: "json",
        success: (response) => {
          console.log(response);
          if (response.status === "0") {
            response.result = JSON.parse(response.result);
            this.userInfo = response.result;
            this.opinionsForm.userName = this.userInfo.userName;
            this.opinionsForm.userId = localStorage.getItem("USER_ID");
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    save() {
      let self = this;
      this.opinionsForm.systemName = this.systemItems.filter((f) => {
        return f.ID === this.opinionsForm.systemId;
      })[0].SYSNAME;
      let param = {
        title: this.opinionsForm.title,
        systemName: this.opinionsForm.systemName,
        systemId: this.opinionsForm.systemId,
        opinions: this.opinionsForm.opinions,
        userName: this.opinionsForm.userName,
        userId: this.opinionsForm.userId,
      };
      this.$confirm("确认保存？")
        .then((_) => {
          self.$.ajax({
            url: self.$API.ajaxPath,
            type: "post",
            data: {
              interfaceName: this.interfaceName,
              methodName: "addOpionions",
              args: [localStorage.getItem("USER_ID"), JSON.stringify(param)],
            },
            dataType: "json",
            success: (response) => {
              console.log(response);
              if (response.status === "0") {
                self.$message.success("提交成功!");
              } else {
                self.$message.error(response.result);
              }
            },
            error: (xhr) => {
              console.log(xhr);
            },
          });
        })
        .catch((_) => {
          console.log(_);
        });
    },
    cancel() {},
  },
  mounted() {
    this.$(".ql-editor .ql-blank")[0].style.height = "400px";
    document.documentElement.scrollTop = document.body.scrollTop = 0;
  },
  created() {
    this.getUserInfo();
    this.getSystem();
    
    // 获取用户所选主题
    this.getUserStyle();
  },
};
</script>
<style lang="less" scoped>
// @import "./css/light.less";
@import "./css/dark.less";
@import "./css/userInfo.less";
.main {
  min-height: 60vh;
}

.header-right-box {
  display: flex;
  align-items: center;
}
 


.main .wrap {
  display: flex;
   margin:0 !important;
}


.menu-box {
  background-color: rgba(244, 249, 255, 1);
}

.menu-box-item {
  height: 60px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-left: 30px;
  background-color: rgba(54, 112, 255, 0.1);
  transition: all 0.3s;
  border-left: 2px rgba(24, 110, 205, 0) solid;
  cursor: pointer;

  p {
    font-size: 16px;
  }
}

.menu-box-item.cur-item {
  background-color: rgba(54, 112, 255, 0.4);
  color: rgba(54, 112, 255, 1);
  border-left: 2px rgba(24, 110, 205, 1) solid;
}



 

.msg-box {
  width: 60%;
  margin: 0 auto;
  padding: 30px 0 0;
}

.msg-box-item {
  display: flex;
  align-items: center;

  p:first-of-type {
    width: 120px;
    color: rgba(80, 80, 80, 1);
    font-size: 14px;
  }

  p:last-of-type {
    color: rgba(80, 80, 80, 1);
    font-size: 14px;
  }
}

.user-msg-box {
  display: flex;
   flex-direction: column;
  align-items: center;
  padding: 20px 0;
}
.el-form-item__content{
  margin-left: 0!important;
}
.home_dark,.home_light{
  overflow: hidden;
}
@media screen and (max-width:1440px) {
.second-page .info-form .el-input,.el-select,.el-textarea{
  width: 35vw!important;
}
}
</style>
